<template>
  <el-container>
    <div class="el-header">运营数据报表</div>
    <div class="el-main" v-show="dateFlag">
      <div class="excelList">
        <ul>
          <li>
            <div class="excelList-row" @click="getNowData()">
              <div class="excel-now">
                点击获取当日数据
              </div>
              <div class="el-icon-mouse"></div>
            </div>
          </li>

          <li>
            <div
              class="excelList-row-his"
              v-on:click="getHistory()"
              v-show="!resultFlag"
            >
              <div class="excel-now">
                点击重跑历史数据（慎点）
                <a-modal
                  v-model="infoFlag"
                  width="30%"
                  title="时间选择"
                  @ok="onSubmit()"
                  ok-text="确认"
                  cancel-text="取消"
                >
                  <div style="padding:10px;">
                    <span class="demonstration">开始时间:</span>
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </div>
                  <div style="padding:10px;">
                    <span class="demonstration">结束时间:</span>
                    <el-date-picker
                      v-model="value2"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </div>
                </a-modal>
              </div>
              <div class="el-icon-mouse"></div>
            </div>
            <div
              class="excelList-row-his"
              v-show="resultFlag"
              style="line-height:80px;"
            >
              <div class="el-icon-loading"></div>
            </div>
          </li>
          <li>
            <div class="excelList-row" @click="gotoReport()">
              <div class="excel-now">
                点击进入导航报表页面
              </div>

              <div class="el-icon-mouse"></div>
            </div>
          </li>
          <li v-for="(p, index) in excelOther" v-show="otherFlag">
            <div class="excelList-row" v-on:click="downloadAttachRow(p)">
              <div class="png">
                <div class="excel-png"></div>
                <div class="excel-title">{{ p }}</div>
              </div>
            </div>
          </li>
          <li v-for="(p, index) in excelDate">
            <div class="excelList-row" v-on:click="openDate(p)">
              <div class="folder">
                <div class="excel-folder"></div>
                <div class="excel-folder-title">{{ p }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="el-main" v-show="excelFlag">
      <div class="excelList">
        <ul>
          <li>
            <div class="excelList-row" v-on:click="returnPage()">
              <div class="excel-title-return">
                反回上一页
              </div>
              <div class="el-icon-back"></div>
            </div>
          </li>
          <li v-for="(p, index) in excelList">
            <div class="excelList-row" v-on:click="downloadAttachRow(p)">
              <div class="png">
                <div class="excel-png"></div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="p"
                  placement="top"
                >
                  <div class="excel-title">{{ p }}</div>
                </el-tooltip>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="el-main-load" v-show="loadFlag">
      <dv-loading>Loading...</dv-loading>
    </div>
  </el-container>
</template>
<script>
import {
  DownFile,
  GetExcelList,
  GetExcelLists,
  GetNowData,
  GetDataFromDate
} from "../api/api.js";
export default {
  data() {
    return {
      excelLineList: [],
      excelDate: [],
      excelOther: [],
      excelList: [],
      excels: {},
      dateFlag: true,
      excelFlag: false,
      loadFlag: false,
      otherFlag: false,
      infoFlag: false,
      value1: "",
      value2: "",
      resultFlag: false
    };
  },
  mounted() {
    this.timeDefault();
    this.getExcels();
  },
  methods: {
    timeDefault() {
      var myDate = new Date();
      var year = myDate.getFullYear();
      var month = myDate.getMonth(); //获取当前月份(0-11,0代表1月)
      var day = myDate.getDate(); //获取当前日(1-31)
      month = month + 1;
      if (month.length == 1) {
        month = "0" + month;
      }
      if (day.length == 1) {
        day = "0" + day;
      }
      this.value1 = year + "-" + month + "-" + day;
      this.value2 = year + "-" + month + "-" + day;
    },
    gotoReport() {
      const { href } = this.$router.resolve({
        path: "report"
      });
      window.open(href, "_blank");
    },
    downloadAttachRow(exName) {
      var param = {};
      param.excelName = exName;
      DownFile(param).then(res => {});
    },
    openDate(date) {
      this.excelFlag = true;
      this.dateFlag = false;
      this.excelList = [];
      console.log(this.excels[date]);
      for (var i = 0; i < this.excels[date].length; i++) {
        this.excelList.push(this.excels[date][i]);
      }
    },
    returnPage() {
      this.excelFlag = false;
      this.dateFlag = true;
    },
    getExcels() {
      this.excelOther = [];
      this.excelDate = [];
      GetExcelLists().then(res => {
        this.excels = res.obj;
        var i = 0;
        for (var key in this.excels) {
          if (key == "other") {
            this.otherFlag = true;
            this.excelOther = this.excels[key];
          } else {
            this.excelDate.push(key);
          }
        }
      });
    },
    getNowData() {
      this.$confirm("是否确认开始？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loadFlag = true;
          GetNowData().then(res => {
            if (res.code != "1000") {
              alert(res.msg);
            }
            this.loadFlag = false;
            this.getExcels();
          });
          this.$message({
            type: "success",
            message: "成功"
          });
        })
        .catch(() => {});
    },
    getHistory() {
      this.infoFlag = true;
    },
    onSubmit() {
      this.infoFlag = false;
      this.resultFlag = true;
      var param = {};
      param.start = this.value1;
      param.end = this.value2;
      GetDataFromDate(param).then(res => {
        this.resultFlag = false;
      });
    }
  }
};
</script>
<style>
.el-header {
  background-color: #5599ff;
  color: #333;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  width: 100%;
  color: #ffffff;
}
.el-main {
  position: absolute;
  top: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #e9eef3;
  text-align: center;
  overflow: auto;
  padding-bottom: 20px;
}
.el-main-load {
  position: absolute;
  top: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  color: #0066ff;
  text-align: center;
  background-color: #000;
  opacity: 0.3;
}
.excelList ul {
  list-style: none;
}
.excelList li {
  display: inline;
  line-height: 30px;
  float: left;
  margin: 15px;
}
.excelList-row {
  height: 100px;
  line-height: 40px;
  width: 247px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 10px;
  cursor: pointer;
  color: #0066ff;
}
.excelList-row-his {
  height: 100px;
  line-height: 40px;
  width: 247px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 10px;
  cursor: pointer;
  color: #0066ff;
}
.excel-title {
  overflow: hidden;
  height: 80px;
  width: 140px;
  float: left;
  line-height: 80px;
  text-align: left;
  padding-left: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.excel-folder-title {
  overflow: hidden;
  height: 50px;
  text-overflow: ellipsis;
  float: left;
  padding-left: 30px;
}
.folder {
  padding-left: 10px;
  padding-top: 15px;
}
.excel-folder {
  width: 65px;
  height: 50px;
  background: url(../image/fileFloder2.png);
  float: left;
}
.excel-png {
  width: 80px;
  height: 80px;
  background: url(../image/excel.png);
  float: left;
}
.el-main::-webkit-scrollbar {
  width: 8px;
}
.el-main::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 8px;
  background: #dddddd;
}
.el-main::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #dddddd;
}
</style>
